{% extends 'journal/base.html' %}

{% load static %}
{% load editorjs %}

{% block extra_head %}
<script type="module">
    import EditorJS from "{% static 'js/editorjs/editor.js' %}";
    import Header from "{% static 'js/editorjs/header.js' %}";
    import List from "{% static 'js/editorjs/list.js' %}";
    import Table from "{% static 'js/editorjs/table.js' %}";
    import ImageTool from "{% static 'js/editorjs/image.js' %}";

    document.addEventListener('DOMContentLoaded', () => {
        const editor = new EditorJS({
            holder: 'editorjs',
            data: {% if form.content.value %}{{ form.content.value|safe }}{% else %}null{% endif %},
            tools: {
                header: {
                    class: Header,
                    config: {
                        levels: [2, 3, 4],
                        defaultLevel: 2
                    }
                },
                list: {
                    class: List,
                    inlineToolbar: true
                },
                table: {
                    class: Table,
                    inlineToolbar: true,
                    config: {
                        rows: 2,
                        cols: 3,
                    }
                },
                image: {
                    class: ImageTool,
                    config: {
                        endpoints: {
                            byFile: '/editorjs/image_upload/'
                        }
                    }
                }
            },
            i18n: {
                messages: {
                    ui: {
                        blockTunes: {
                            toggler: {
                                "Click to tune": "点击调整",
                                "or drag to move": "或拖动"
                            },
                        },
                    }
                }
            }
        });

        document.querySelector('form').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            try {
                const outputData = await editor.save();
                document.querySelector('#id_content').value = JSON.stringify(outputData);
                
                const actionValue = e.submitter.value;
                
                let actionInput = this.querySelector('input[name="action"]');
                if (!actionInput) {
                    actionInput = document.createElement('input');
                    actionInput.type = 'hidden';
                    actionInput.name = 'action';
                    this.appendChild(actionInput);
                }
                actionInput.value = actionValue;
                
                this.submit();
            } catch (error) {
                console.log('保存失败:', error);
            }
        });
    });
</script>
{% endblock extra_head %}

{% block main %}
<style>
    .no-magick-form {
        display: block;
        margin: unset;
        box-shadow: unset;
        background-color: unset;
    }
    #editorjs {
        margin-bottom: 20px;
    }
    .field-wrapper {
        margin-bottom: 1rem;
    }
    .field-wrapper label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: bold;
    }
    .checkbox-wrapper {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }
    .checkbox-wrapper label {
        margin-bottom: 0;
    }
</style>
<form class="no-magick-form" method="post">
    {% csrf_token %}
    <div class="field-wrapper">
        <label for="{{ form.title.id_for_label }}">{{ form.title.label }}</label>
        {{ form.title }}
    </div>

    <div class="field-wrapper">
        <label>{{ form.content.label }}</label>
        <div id="editorjs"></div>
        <input type="hidden" id="id_content" name="content">
    </div>

    <div class="checkbox-wrapper">
        {{ form.private.as_widget }}
        <label for="{{ form.private.id_for_label }}">{{ form.private.label }}</label>
        {% if form.private.help_text %}
        <small class="help-text">{{ form.private.help_text }}</small>
        {% endif %}
    </div>

    <div class="checkbox-wrapper">
        {{ form.draft.as_widget }}
        <label for="{{ form.draft.id_for_label }}">{{ form.draft.label }}</label>
    </div>

    <div class="buttons">
        <button type="submit" name="action" value="save">保存</button>
        {% if not is_published %}
        <button type="submit" name="action" value="publish">保存并发布</button>
        {% endif %}
    </div>
</form>
{% endblock %} 